<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		center
		mode="form"
		:close-on-click-modal="true"
		@open="onOpen"
		@closed="onClose"
		v-if="value.item.express_info.express_name && value.item.express_info.express_no "
	>
		<!-- 页面主体内容开始 -->
		<view style="margin:20px 30px 30px 30px;overflow-y: auto;max-height: 700px;" >
		<el-form :inline="true"  :model="form1" class="demo-form-inline"  style="letter-spacing: 2px;" >
			<el-form-item>
				<image :src="page.expressInfo.logo" mode="widthFix" style="width: 100px;"></image>
			</el-form-item>
			<el-form-item>
				<text style="font-size: 28rpx;">快递公司：</text>
				<text style="font-weight: bold;font-size: 32rpx;color: red;font-size: 28rpx;" >{{value.item.express_info.express_name}}</text>
			</el-form-item>
			<el-form-item>
				<text style="font-size: 28rpx;" >快递单号：</text>
				<text style="font-weight: bold;font-size: 32rpx;color: red;font-size: 28rpx;" >{{value.item.express_info.express_no}}</text>
			</el-form-item>
			<el-form-item>
				<text style="font-size: 28rpx;" >快递客服电话：</text>
				<text style="font-weight: bold;font-size: 32rpx;color: red;font-size: 28rpx;" >{{page.expressInfo.tel}}</text>
			</el-form-item>
		</el-form>
		 <view style="min-height:60vh;" v-loading="page.loading">
			<view style="height: 600px;" v-if="page.expressInfo.dataSize!=0" >
			  <el-steps direction="vertical" :active="dataCom.length-1" space="60px"  style="font-size: 28rpx;"  finish-status="wait" process-status="finish">
			    <el-step v-for="(item,index) in dataCom" :key="index"
					:title="item.context" :description="item.time" ></el-step>
			  </el-steps>
			</view>
			<view v-else style="line-height: 60vh;width: 100%;height: 600px;" >
				<view style="font-size: 36px;text-align: center;color:#dcdfe3;" >查无记录</view>
			</view>
		 </view>

		</view>
		<template v-slot:footer>
			<view>
				<el-button @click="value.show=false" style="width: 100px;" >关闭</el-button>
			</view>
		</template>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item:{
						express_info:{
							express_no:'',
							express_name:''
						}
					},
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			page: {
				title: "物流查询",
				submitText: "确定",
				cancelText: "关闭",
				showCancel: true,
				top: "5vh",
				width: "1000px",
				expressInfo:[],
				loading: false
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {},
				// 表单属性
				props: {
					// 表单请求地址
					action: "",
					// 表单字段显示规则
					columns: [
						// 常用字段类型
						{ key: "", title: "常用字段类型", type: "bar-title" },
						{ key: "text", title: "text类型", type: "text" },
						// 选择型字段
						{ key: "", title: "选择型字段", type: "bar-title" },
						{
							key: "radio",
							title: "radio类型",
							type: "radio",
							data: [{ value: 1, label: "选项1" }, { value: 2, label: "选项2" }]
						}
					],
					// 表单验证规则
					rules: {},
					labelWidth: "100px"
				}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that._input(value);
		},
		_input(value) {
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { value = {} } = that;
			let { item } = value;
			that.form1.data = vk.pubfn.copyObject(item);
			let com = value.item.express_info.express_com || "auto";
			vk.callFunction({
				url: 'plugs/express.getInfo',
				loading:{ name:"page.loading", that },
				data:{
					com,
					no:value.item.express_info.express_no
				},
				success:(data)=>{
					this.page.expressInfo = data.data;
				}
			});
		},
		// 监听 - 页面关闭
		onClose() {
			this.page.expressInfo.data = [];
		},
		// 打开页面
		open() {
			let { value } = that;
			value.show = true;
			that._input(value);
		},
		// 关闭页面
		close() {
			let { value } = that;
			value.show = false;
			that._input(value);
		},
	},
	watch: {
		
	},
	// 计算属性
	computed: {
		dataCom(){
			let { page } = this;
			let list = vk.pubfn.getData(page, "expressInfo.data");
			if (list){
				list = list.reverse();
			} else {
				list = [];
			}
			return list;
		}
	}
};
</script>

<style lang="scss" scoped>
	::v-deep .el-step__title{
		font-size: 14px;
	}
</style>
